<template>
  <div style="width: 96%; margin: 0 auto">
    <div id="app">
      <div style="margin-top: 15px">
        <el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
          style="width: 20%"
        >
        </el-input>
        <el-button type="success" plain slot="append" @click="searchBegin(true)"
          >搜索</el-button
        >
      </div>
    </div>

    <el-table
      :data="
        tableDataEnd.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'ascending' }"
    >
      <el-table-column fixed prop="date" label="序号" sortable width="100">
      </el-table-column>
      <el-table-column prop="name" label="试卷类型" width="200">
      </el-table-column>
      <el-table-column prop="province" label="班级" width="150">
      </el-table-column>
      <el-table-column prop="city" label="应参加人数" width="200">
      </el-table-column>
      <el-table-column prop="address" label="实际参加人数" width="200">
      </el-table-column>
      <el-table-column prop="zip" label="平均分" width="200"> </el-table-column>
      <el-table-column prop="score" label="及格人数" width="150">
      </el-table-column>
      <el-table-column prop="time" label="创建时间" sortable width="200">
      </el-table-column>
      <el-table-column prop="people" label="创建人" width="200">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template>
          <el-button type="success" size="medium" plain @click="lookdetails"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footer">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1, 2, 3, 5]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScoremManagement",
  created() {
    this.tableDataEnd = this.tableData;
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    lookdetails() {
      this.$router.push({ path: "/Scoremdetails" });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    searchBegin(bool) {
      let newListData = [];
      if (bool) {
        let _input = this.input;
        if (!_input) {
          newListData = this.tableData;
        } else {
          this.tableData.filter((item) => {
            if (
              item.name.indexOf(_input) !== -1 ||
              item.time.indexOf(_input) !== -1
            ) {
              newListData.push(item);
            }
          });
        }
        this.tableDataEnd = newListData;
      }
    },
  },
  data() {
    return {
      input: "",
      tableDataEnd: [],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页的数据条数
      tableData: [
        {
          date: 1,
          name: "Java基础",
          province: "一班",
          city: "50",
          address: "49",
          zip: "75",
          score: 30,
          time: "2022.10.19",
          people: "admin",
        },
        {
          date: 2,
          name: "HTML+CSS",
          province: "二班",
          city: "50",
          address: "49",
          zip: "75",
          score: 30,
          time: "2022.10.20",
          people: "admin",
        },
        {
          date: 3,
          name: "JS基础",
          province: "三班",
          city: "50",
          address: "49",
          zip: "75",
          score: 30,
          time: "2022.10.17",
          people: "admin",
        },
        {
          date: 4,
          name: "jquery基础",
          province: "四班",
          city: "50",
          address: "49",
          zip: "75",
          score: 30,
          time: "2022.10.16",
          people: "admin",
        },
        {
          date: 5,
          name: "VUE",
          province: "五班",
          city: "50",
          address: "49",
          zip: "75",
          score: 30,
          time: "2022.09.20",
          people: "admin",
        },
      ],
    };
  },
};
</script>

<style>
</style>